<template>
   <ul>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          class="vanlist"
          @click.native="toDetail"
        >
        <!-- 列表数据 -->
         <li v-for="(item,index) in directlyList" :key="item.displaySkuId" @click.stop.prevent="toDetail(index)">
            <img :src="item.listPicUrl" v-lazy="item.listPicUrl" alt="">
            <p class="title">{{item.name}}</p>
            <div class="price">
              <span class="now">￥ <i>{{item.retailPrice}}</i></span>
              <span class="old">￥<i>{{item.sortOriginPrice}}</i></span>
            </div>
            <div class="activity">
              <div class="left">{{item.finalPriceInfoVO.banner && item.finalPriceInfoVO.banner.title != '' ? item.finalPriceInfoVO.banner.title : '特价'}}</div>
              <div class="right">{{item.finalPriceInfoVO.banner ?item.finalPriceInfoVO.banner.content : '限时优惠'}}</div>
            </div>
         </li>
      </van-list>

    </ul>
</template>

<script>
import { mapState } from "vuex";

  export default {
    name:'List',
    data(){
      return{
      loading: false,  //下拉加载的loading
      finished: false, //数据加载完成之后
      index:0,   //用户刷新了几次，一次来20条数据，控制不重复的20条
      }
    },
    computed:{
       ...mapState({
      directlyList: (state) => state.search.directlyList,
      value: state => state.search.value
    }),
    },
    methods:{
       // 下拉异步加载数据
   async onLoad(){
      // 发请求捞数据
      // console.log(1111,this.index)
      this.index = this.index + 1
      // console.log(this.index)
      // console.log(this.value)
      const {value,index} = this
      const data = {value,index}
     await  this.$store.dispatch('search/getProductList',data)
      this.loading = false
      this.finished = true;
    },
        // 点击跳转详情组件
    toDetail(xiozhu){
      // index = index + 1
      xiozhu++
      console.log(xiozhu)
      this.$router.push({name:'detail',query:{
        skuid:xiozhu
      }})
    }
    }
  }
</script>

<style lang="less" scoped>
  // 商品列表位置
ul {
  box-sizing: border-box;
  
  padding: 20px;
  width: 100%;
  font-size: 14px;
  .vanlist{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  }
  li {
    width: 48%;
    margin-bottom: 20px;
    img {
      width: 100%;
      border-radius: 10px;
    }
    .title {
      margin-top: 10px;
      line-height: 16px;
    }
    .price {
      margin-top: 7px;
      .now {
        font-size: 12px;
        i {
          font-size: 18px;
          color: #fb2639;
          font-weight: bold;
        }
      }
      .old {
        margin-left: 5px;
        font-size: 12px;
        color: #666;
        text-decoration: line-through;
      }
    }
    .activity {
      display: flex;
      width: 100%;
      background-color: #ffe9eb;
      border-radius: 10px;
      padding: 3px 0;
      .left {
        margin-right: 8px;
        color: #fff;
        background-color: #fb2639;
        border-radius: 5px;
        // padding: 2px 5px;
        font-weight: bold;
        font-size: 12px;
        white-space: nowrap;
        height: 20px;
        line-height: 20px;
      }
      .right {
        color: #fb2639;
        font-size: 12px;
        font-weight: 700;
        padding: 2px 0px;
        height: 20px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>